<template>
  <div class="sort">
    <div class="pai">
      <i class="el-icon-sort"></i><span class="sort1">排序</span>
    </div>
    <div class="oSpan">
      <span :class="count == 0 ? 'sort2 active' : 'sort2'" @click="sortOrder1"
        >默认排序</span
      >
      <span :class="count == 1 ? 'sort2 active' : 'sort2'" @click="sortOrder2"
        >订单金额高<i class="el-icon-bottom"></i
      ></span>
      <span :class="count == 2 ? 'sort2 active' : 'sort2'" @click="sortOrder3"
        >订单数件高<i class="el-icon-bottom"></i
      ></span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    sortOrder1() {
      this.count = 0;
    },
    sortOrder2() {
      this.count = 1;
    },
    sortOrder3() {
      this.count = 2;
    },
  },
};
</script>

<style lang="scss" scoped>
.sort {
  font-size: 12px;
  color: rgb(23, 28, 73);
  font-weight: 600;
  line-height: 1;
  position: relative;
  .pai {
    .el-icon-sort {
      color: rgb(33, 61, 192);
      font-size: 18px;
      font-weight: 600;
    }
    .sort1 {
      margin: 10px 20px 0 15px;
      font-size: 17px;
    }
  }
  .oSpan {
    position: absolute;
    top: 0;
    left: 56px;
    .sort2 {
      float: left;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 30px;
      height: 40px;
      padding: 0 15px;
      border-radius: 20px;
      transition: 1s;
    }
    .el-button--primary {
      height: 32px;
      font-size: 13px;
    }
    .active {
      background: rgb(33, 61, 192);
      color: #fff;
    }
  }
}
</style>